<!--移除设备-->
<template>
  <div id="table">
    <el-autocomplete
      class="inline-input"
      id="search"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @change="handleSelect"
      @select="handleSelect"
    ></el-autocomplete>

    <el-table
      :data="pagination"
      style="width: 100%"
      v-if = "!state2"
      @row-click="del"
      >
      <el-table-column
        prop="id"
        label="设备编号"
        width="130"
        sortable
        column-key="id"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="130"
        sortable
        column-key="name"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="设备地址"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="lat"
        sortable
        label="经度">
      </el-table-column>
      <el-table-column
        prop="lng"
        sortable
        label="纬度">
      </el-table-column>
      <el-table-column
        prop="dtuid"
        sortable
        label="dtu编号">
      </el-table-column>
      <el-table-column
        prop="state"
        sortable
        label="设备状态">
      </el-table-column>
      <el-table-column>
        <el-button type="danger" icon="el-icon-delete" circle
        @click="del"
        ></el-button>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
        v-if="!state2"
        >
      </el-pagination>

    <el-table
      v-else
      :data="pagination"
      style="width: 100%"
      @row-click="del"
      >
      <el-table-column
        prop="id"
        label="设备编号"
        width="130"
        sortable
        column-key="id"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="130"
        sortable
        column-key="name"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="设备地址"
        sortable
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="lat"
        sortable
        label="经度">
      </el-table-column>
      <el-table-column
        prop="lng"
        sortable
        label="纬度">
      </el-table-column>
      <el-table-column
        prop="dtuid"
        sortable
        label="dtu编号">
      </el-table-column>
      <el-table-column
        prop="state"
        sortable
        label="设备状态">
      </el-table-column>
      <el-table-column>
        <el-button type="danger" icon="el-icon-delete" circle
        @click="del"
        ></el-button>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleNewSizeChange" @current-change="handleNewCurrentChange" :current-page="currenNewPage"
        :page-sizes="pageNewSizes" :page-size="pageNewSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalNewItems"
        v-if="state2"
        >
      </el-pagination>

  </div>

</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      searchtable: [],
      pagination: [],
      currentPage: 1,
      // 分页的分界线
      start: 0,
      end: 10,
      pageSize: 6, // 每页显示的条目数量
      totalItems: 0, // 数据库中条目数量
      pageSizes: [6, 8, 10, 20] ,// 每页显示条目数量的选项

      currentNewPage: 1,
      // 分页的分界线
      Newstart: 0,
      Newend: 10,
      pageNewSizes: [6, 8, 10, 20],
      pageNewSize: 6,
      totalNewItems:0,

      restaurants: [],
      state2: '',
      tableData: [],

    }
  },
    methods:{
    handleSelect()
    {
      this.searchtable = this.tableData.filter(item => {
            return String(item.id) === this.state2
        })
      if(this.state2 == '')
        this.searchtable = this.tableData
      this.searchpage()
    },
    async del(row)
    {
      let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
        const config = {
            headers: {
                // 设置内容类型为JSON
                'Content-Type': 'application/json;charset=UTF-8',
                // 添加token到请求头
                'token': user.token || '',
            }
        }
      const id = row.id
        //this.$request.delete('/device/${id}').then(res => {
           const res = await axios.delete(`http://127.0.0.1:8000/device/${id}`,config)
          console.log(res)
          //this.$request.post('/device').then(res1 => {
              const res1 = await axios.get('http://127.0.0.1:8000/device',config)
        this.tableData = res1.data.data
        if(this.tableData && this.tableData.length > 0){
            for (var i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].state == 0)
                    this.tableData[i].state = '离线'
                else
                    this.tableData[i].state = '在线'
            }
            this.fetchData()
        }else{
            this.fetchData()
        }

          //})
      //})
    },
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
    createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    loadAll() {
        return [

        ]
      },
    fetchData () {
      this.start = (this.currentPage - 1) * this.pageSize
      this.end = this.start + this.pageSize
        if (this.tableData && this.tableData.length > 0) {
            this.pagination = this.tableData.slice(this.start, this.end);
            this.totalItems = this.tableData.length;
            this.totalNewItems = this.tableData.length;
        } else {
            this.pagination = [];
            this.totalItems = 0;
        }
      if(this.pagination.length / this.pageSize + 1 <= this.currentPage)
        this.currentPage--
    },
    searchpage(){
      this.Newstart = (this.currentNewPage - 1) * this.pageNewSize
      this.Newend = this.Newstart + this.pageNewSize
      this.pagination = this.searchtable.slice(this.Newstart, this.Newend)
      this.totalNewItems = this.searchtable.length;
      if(this.pagination.length / this.pageNewSizes + 1 <= this.currentNewPage)
        this.currentNewPage--
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.fetchData() // 更新每页显示的条目数量后重新请求数据
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.fetchData() // 更新当前页数后重新请求数据
    },
    handleNewSizeChange (newSize) {
      this.pageNewSize = newSize
      this.searchpage() // 更新每页显示的条目数量后重新请求数据
    },
    handleNewCurrentChange (newPage) {
      this.currentNewPage = newPage
      this.searchpage() // 更新当前页数后重新请求数据
    },
  },
  mounted() {
      this.restaurants = this.loadAll();
    },
    async created(){
        let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
        const config = {
            headers: {
                // 设置内容类型为JSON
                'Content-Type': 'application/json;charset=UTF-8',
                // 添加token到请求头
                'token': user.token || '',
            }
        }
    const res = await axios.get('http://127.0.0.1:8000/device',config);
        if(res.data.code == '401')
            this.$router.push('/')
     this.tableData = res.data.data
     for(var i = 0;i < this.tableData.length; i++)
      {
      if(this.tableData[i].state == 0)
        this.tableData[i].state = '离线'
      else
        this.tableData[i].state = '在线'
      }
     this.fetchData()
  }
}
</script>

<style>
  #search{
    width: 600px;
    position: fixed;
    left: auto;
    top: 80px;
  }
  #table{
    line-height: 50px;
  }
  #searchicon{
    position: fixed;
    left: 1300px;
    top: 80px;
  }
</style>